

<template>
	<view>
	<video :id="'myVideo'+ video.id" @click="click" @play="changePlay" class="video" :controls="false" :loop="false"
		:src="video.src" :poster="video.preImg" :style="{height:screenHeight+'px'}">
	</video>
	<cover-image
	class="play" v-if="show_play"
	@tap="videoPlay"
	src="/static/video/play_1.png"></cover-image>
	</view>
</template>
 
<script>
	export default {
		props: ['video', "screenHeight"],
		name: "videoPlayer",
		data() {
			return {
				play: false,
				screenHeight: 0,
				show_play: false
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo" + this.video.id, this)
			console.log("视频组件onready:");
		},
		mounted() {
			this.videoContext = uni.createVideoContext("myVideo" + this.video.id, this)
		},
		methods: {
			click() {
				console.log("click", this.video.id, this.play);
				if (!this.play) {
					this.show_play=false
					this.playthis()
				} else {
					this.show_play=true
					this.pauseVideo()
				}
			},
			playVideo() {
				if (this.play === false) {
					console.log("playVideo", this.video.id);				
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
					this.show_play=false
				}
			},
			pauseVideo() {
				console.log("pauseVideo", this.video.id);
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			videoPlay() {
				console.log("播放")
					this.show_play = false
					this.playVideo()					
			},
			playthis() {
				// console.log("playthis", this.video.id);
				if (this.play === false) {
					console.log("playthis", this.video.id);
					this.videoContext.play()
					this.play = true
				}
			},
			changePlay() {
				console.log("changePlay");
				this.play = true
			}
		}
	}
</script>
 
<style>
	.video {
		width: 750rpx;
	}
 
	.play{
		position: absolute;
		width: 20vw;
		height: 20vw;
		left: 40vw;
		top: 40vh;
		opacity: 0.5;
	}
	.progressBar {
		border-radius: 2upx;
		height: 4upx;
		background-color: #FF4500;
		z-index: 999999;
		position: absolute;
		bottom: 68rpx;
	}
	
	.cover-view-left {
		position: absolute;
		margin-left: 20upx;
		width: 580upx;
		bottom: 110upx;
		z-index: 9999;
		font-size: 14px;
		color: #ffffff;
	}
	.left-text {
		font-size: 14px;
		color: #ffffff;
	}
	
	.cover-view-right {
		position: absolute;
		bottom: 40px;
		right: 30upx;
		z-index: 9999;
		text-align: center;
	}
	
	.avater {
		border-radius: 50%;
		border-width: 2px;
		border-style: solid;
		border-color: #ffffff;
	}
	
	.img {
		height: 90upx;
		width: 90upx;
		margin-bottom: 110upx;
	}
	
	.img-left {
		width: 80upx;
		height: 66upx;
		padding-left: 4px;
	}
	.right-follow {
		position: absolute;
		z-index: 100;
		top: 75upx;
		left: 28upx;
		color: #ffffff;
		font-size: 16px;
		width: 34upx;
		height: 34upx;
		background-color: #f12f5b;
		text-align: center;
		line-height: 34upx;
		border-radius: 17upx;
	}
	
	.right-text {
		color: #ffffff;
		font-size: 11px;
		text-align: center;
		margin-bottom: 40upx;
	}
	.musicIcon {
		margin-top: 40upx;
	}
	@keyframes rotating {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}
	.view-left-text-content {
		flex: 1;
	}
	.view-left-text {
		color: #ffffff;
		font-size: 18px;
		margin-bottom: 10upx;
		font-weight: bold;
	}
	.text-content-text {
		color: #ffffff;
		font-size: 16px;
		line-height: 50upx;
		height: 100upx;
		overflow: hidden;
	}
</style>
